<script setup lang="ts">
import Cookies from 'js-cookie'

import useReceiveMessage from './useReceiveMessage'
import HeadlineTitle from '@/components/HeadlineTitle/HeadlineTitle.vue'
import AsideLeft from '@/components/AsideLeft/AsideLeft.vue'
import AsideRight from '@/components/AsideRight/AsideRight.vue'
import IndicatorsValueSummary from '@/components/IndicatorsValueSummary/IndicatorsValueSummary.vue'
import MonitorStatistics from '@/components/MonitorStatistics/MonitorStatistics.vue'
import AnnualConsumptionChart from '@/components/AnnualConsumptionChart/AnnualConsumptionChart.vue'
import GeoMap from '@/components/GeoMap/GeoMap.vue'
import WidgetDateTemperature from '@/components/WidgetDateTemperature/WidgetDateTemperature.vue'
import WidgetGlobalFilter from '@/components/WidgetGlobalFilter/WidgetGlobalFilter.vue'

import useIndicatorsValueSummaryAndMonitorStatistics from '@/components/IndicatorsValueSummary/useIndicatorsValueSummaryAndMonitorStatistics'
import useAnnualConsumptionChart from '@/components/AnnualConsumptionChart/useAnnualConsumptionChart'

const showAside = ref(false)
const wrapRef = ref<HTMLElement>()

const { auth } = useReceiveMessage()
const {
  data: data1,
  getIndicatorsValueSummaryAndMonitorStatistics,
} = useIndicatorsValueSummaryAndMonitorStatistics()
const {
  sliceData: annualConsumptionChartData,
  title: annualConsumptionChartTitle,
  unit: annualConsumptionChartUnit,
  start,
} = useAnnualConsumptionChart()

provide('defaultNumber', (number: string | number | undefined, string = '-', useFormat = true) => {
  function isEmpty(value: any) {
    return value === '' || value == null
  }
  function formatNumber(number: any) {
    return Number(number).toLocaleString()
  }
  number = isEmpty(number) ? string : number
  return ((useFormat && number !== string) ? formatNumber(number) : number) as string
})

let timer: ReturnType<typeof setInterval>
onBeforeUnmount(() => {
  timer && clearInterval(timer)
})

const allYearAleady = ref(false)
onMounted(() => {
  timer = setInterval(() => {
    if (unref(auth)) {
      getIndicatorsValueSummaryAndMonitorStatistics()
      start(() => {
        allYearAleady.value = true
      })
      clearInterval(timer)
    }
    else {
      const token = Cookies.get('token')
      auth.value = !!token
    }
  }, 20)
  setTimeout(() => {
    showAside.value = true
  }, 400)
})
</script>

<template>
  <div ref="wrapRef" class="wrap position-relative">
    <HeadlineTitle />
    <WidgetGlobalFilter v-if="false" class="widget widget-global-filter" />
    <WidgetDateTemperature v-if="false" class="widget widget-date-temperature" />
    <IndicatorsValueSummary
      class="indicators-value-summary"
      :value1="data1.comprehensiveEnergyConsumption"
      :value2="data1.industrialOutput"
      :value3="data1.energyConsumption"
    />
    <MonitorStatistics
      class="monitor-statistics"
      :value1="data1.enterprise"
      :value2="data1.indicator"
      :value3="data1.dataCount"
    />
    <GeoMap v-if="auth" />

    <Transition
      enter-active-class="animate__animated animate__slideInLeft"
      leave-active-class="animate__animated animate__slideOutLeft"
    >
      <AsideLeft v-if="showAside" />
    </Transition>
    <Transition
      enter-active-class="animate__animated animate__slideInRight"
      leave-active-class="animate__animated animate__slideOutRight"
    >
      <AsideRight v-if="showAside" />
    </Transition>
    <Transition
      enter-active-class="animate__animated animate__slideInUp"
      leave-active-class="animate__animated animate__slideOutDown"
    >
      <AnnualConsumptionChart
        v-if="showAside && allYearAleady" class="annual-consumption-chart"
        :title="annualConsumptionChartTitle"
        :data="annualConsumptionChartData"
        :unit="annualConsumptionChartUnit"
      />
    </Transition>
  </div>
</template>

<style>
.wrap {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-image: url('./bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  user-select: none;
}

.wrap::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-image: url('./honeycomb.png');
  background-size: auto 100%;
  background-position: center;
}

.aside {
  width: var(--aside-width);
  top: 6vh;
  bottom: 30px;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1900;
}

.aside-wrap {
  position: relative;
  z-index: 10;
  overflow: hidden;
}

.aside-left {
  left: 0;
}

.aside-right {
  right: 0;
}

.aside-wrap>.block-item {
  width: 24.68vw;
  pointer-events: all;
}

.indicators-value-summary {
  position: absolute;
  left: calc(var(--aside-width) - 160px);
  right: calc(var(--aside-width) - 160px);
  top: 100px;
}

.monitor-statistics {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-240%, 50%);
}

.annual-consumption-chart {
  position: absolute;
  left: 50%;
  bottom: 40px;
  width: 43.02vw;
  margin-left: calc(-0.5 * 43.02vw);
  z-index: 2000;
}

.annual-consumption-chart .item-head {
  padding: 10px 16px 16px 50px;
}

.geo-map {
  width: calc(100% - 2 * var(--aside-width) + 350px);
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3800;
}

.widget {
  position: absolute;
  top: 32px;
}

.widget-global-filter {
  width: 400px;
  left: 30px;
  z-index: 2100;
}

.widget-date-temperature {
  right: 30px;
}
</style>
